<template>
    <div class="templ">
        <!--引入mint-ui的swipe创建轮播图-->
        <div>
            <mt-swipe :auto="3000">
                <mt-swipe-item>
                    <img src="../static/images/swipe1.jpg">
                </mt-swipe-item>
                <mt-swipe-item>
                    <img src="../static/images/swipe2.jpg">
                </mt-swipe-item>
            </mt-swipe>
        </div>

        <!--使用mui的9宫格创建导航-->
        <div>
            <ul class="mui-table-view mui-grid-view mui-grid-9">
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/ssq/ssqbuy" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/ssq.gif">
                        <div class="mui-media-body">双色球</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/fc3d/fc3dbuy" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/fc3d.gif">
                        <div class="mui-media-body">福彩3D</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/qlc/qlcbuy" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/qlc.gif">
                        <div class="mui-media-body">七乐彩</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/qxc/qxcbuy" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/qxc.gif">
                        <div class="mui-media-body">七星彩</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
                    <router-link to="/dlt/dltbuy" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/dlt.gif">
                        <div class="mui-media-body">超级大乐透</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" @click="getMore">
                    <a href="#" class="items">
                        <span class="mui-icon mui-icon-more" id="more-icon"></span>
                        <div class="mui-media-body">更多</div>
                    </a>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-if="isShow">
                    <router-link to="#" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/pl3.gif">
                        <div class="mui-media-body">排列3</div>
                    </router-link>
                </li>
                <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3" v-if="isShow">
                    <router-link to="#" class="items">
                        <img src="http://misc.opencai.net/for-opencai/v2/logos/pl5.gif">
                        <div class="mui-media-body">排列5</div>
                    </router-link>
                </li>
            </ul>
        </div>


        <!--最近的开奖的彩票号码展示-->
        <div class="showNum">
            <!--使用mui的media-list创建暂时模块-->
            <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media" v-for="item in list">
                    <router-link class="mui-navigate-right" v-bind='{to:"/"+item.code+"/"+item.code+"info"}'>
                        <img class="mui-media-object mui-pull-left" :src="item.img">
                        <div class="mui-media-body">
                            <div class="title"><h5>{{item.type}}</h5><span class="info">第{{item.expect}}期</span></div>
                            <div class="balls">
                                <!--根据传回的数据处理判断彩票的小球颜色，如果传回的长度大于2则为蓝球，字符串转换为数字去除前面的标识-->
                                <span v-for="code in item.opencode" class="ball"
                                      v-bind='{class:code.length>2?"blue":"red"}'>
                                    {{parseInt(code)}}
                                </span>
                            </div>
                            <div class="time">开奖时间：{{item.opentime}}</div>
                        </div>
                    </router-link>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
    import common from '../kits/common'
    import {dataTransation} from '../kits/dataTransaction'
    export default {
        data() {
            return {
                isShow: false,
                list: [
//                    {
//                        code: 'fc3d',
//                        type: '福彩3D',
//                        img: './src/static/images/fc3d.webp',
//                        expect: "2017145",
//                        opencode: ['9', '4', '5'],
//                        opentime: "2017-06-01 21:00:00",
//                        opentimestamp: 1496323200
//                    },
//                    {
//                        code: 'ssq',
//                        type: '双色球',
//                        img: './src/static/images/ssq.webp',
//                        expect: "2017063",
//                        opencode: ['12', '16', '20', '22', '27', '31', '+04'],
//                        opentime: "2017-06-01 21:00:00",
//                        opentimestamp: 1496323100
//                    }
                ]
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getMore(){
                this.isShow = !this.isShow;
            },
            //发送请求从api接口中获取数据并存储到list中
            getList(){
                let list = [];
                //请求各种彩票数据
                let type = ['ssq-1','fc3d-1','qlc-1','qxc-1','dlt-1'];
                for (var i = 0; i < type.length; i++) {
                    const url = common.apidomain + type[i] + '.json';
                    this.$http.jsonp(url).then((response) => {
//                    console.log(dataTransation(response.body));
                        list.push(dataTransation(response.body));
                    });
                }
                this.list = list;
            }
        }
    }
</script>

<style scoped>
    /*轮播图*/
    .mint-swipe {
        width: 100%;
        height: 200px;
    }

    .mint-swipe-item {
        width: 100%;
        height: 100%;
    }

    /*九宫格*/
    .mint-swipe-item img {
        width: 100%;
        height: 100%;
    }

    .mui-table-view {
        background-color: #fff;
        margin-top: 10px;
    }

    .mui-grid-view.mui-grid-9 {
        border: none;
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border: none;
    }

    .mui-table-view li img {
        width: 60px;
        height: 60px;
    }

    .mui-table-view.mui-grid-view .mui-table-view-cell .items {
        padding: 0;
    }

    #more-icon {
        width: 60px;
        height: 65px;
        padding-top: 20px;
        margin-bottom: 20px;
    }

    /*彩票展示*/
    .showNum {
        margin-top: 10px;
    }

    .mui-table-view {
        margin: 0;
    }

    .mui-table-view-cell::after {
        left: 0;
    }

    .mui-table-view li img {
        width: 80px;
        height: 80px;
        max-width: 80px;
    }

    .mui-table-view-cell .mui-navigate-right {
        padding-right: 0;
        padding-left: 0;
    }

    .balls {
        display: flex;
        justify-content: space-around;
        width: 80%;
    }

    .ball {
        display: inline-block;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        color: white;
        border-radius: 50%;
    }

    .red {
        background-color: red;
    }

    .blue {
        background-color: blue;
    }

    .info {
        font-size: 14px;
        color: #a1a1a1;
    }

    .title {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        padding-right: 30px;
    }

    .title h5 {
        float: left;
    }

    .time {
        font-size: 14px;
        color: #007aff;
        line-height: 22px;
        height: 30px;
        margin-top: 10px;
    }

    .mui-h5, h5 {
        font-size: 16px;
        color: #222222;
    }
</style>